<template>
  <div class="index-root" style="position: relative;overflow: hidden;">
<!--    <el-button @click="testBTN">123</el-button>-->
    <div class="block-title">
      <div class="title">
        <span class="username"     >{{greeting}} {{username}} !</span>
        <span class="chicken-soup" >每一个想要学习的念头, 都有可能是未来的你在向你求救.</span>
      </div>
    </div>

    <div class="block-body">

      <!-- ─────────────────────────────────────────────── 主界面 ───────────────────────────────────────────────-->
      <div class="body-main" :style="DynamicStyle.main" >
        <div class="c-one">
          <div class="c-one-avatar global-hover-more"><img class="c-one-avatar-img" :src="photoUrl"></div>
          <div class="c-one-statistics">
            <!-- ─────────────────────────────────────── 图片统计 ─────────────────────────────────────── -->
            <statisticePicture class="global-hover-more" ref="statisPicture"></statisticePicture>
            <!-- ─────────────────────────────────────── 文章统计 ─────────────────────────────────────── -->
            <statisticeArticle class="global-hover-more" ref="statisArticle"></statisticeArticle>
          </div>
        </div>

        <div class="c-two">
          <weather ref="weather"></weather>
          <div class="c-tow-calender">
            <div class="c-tow-calender-title">
              <div class="title-body">
                <span>每日计划</span>
                <span style="margin-left: 10px;font-size: 12px;">要努力完成喔!</span>
                <span class="title-body-emoji">୧(๑•̀⌄•́๑)૭</span>
              </div>
            </div>

            <div class="c-tow-calender-content">
              <planCard mode="vertical" ref="refPlanCard"></planCard>

              <div class="plan-line-tool">
                <div class="plan-line" v-for="line in planLines" :key="line.planId">
                  <div class="plan-line-time">{{line.time}}<span class="plan-line-title"> | {{line.title}}</span></div>
                  <div class="plan-line-content">{{line.content ? line.content : line.title}}</div>
                </div>
              </div>
            </div>

          </div>

        </div>

        <div v-if="screenWidth >= 1300"  class="show-tool" @click="toolVisibleHandler">
          <svg class="icon show-tool-icon" aria-hidden="true">
            <use xlink:href="#icon-gongju"></use>
          </svg>
        </div>
      </div>

      <!-- ─────────────────────────────────────────────── 右边界面 ───────────────────────────────────────────────-->
      <div class="body-right" :style="DynamicStyle.right">
        <webCollect></webCollect>
      </div>
    </div>
  </div>
</template>

<script>
import { ipcRenderer } from 'electron'
import weather from "../../components/weather"
import webCollect from "../../components/webCollect"
import statisticePicture from "../../components/statisticePicture"
import statisticeArticle from "../../components/statisticeArticle"
import planCard from "../model/plan/planCard"
import { getPlans } from '../../api/plan'
import { getNowDate } from '../../assets/js/utils/util'

export default {
  name: 'index',
  data () {
    return {
      DynamicStyle : {
        main : 'width:100%',
        right: 'width:0%;',
        show: true // 日间夜间背景图片
      },
      toolVisible: false,
      screenWidth: document.body.clientWidth,
      planLines: [],
      defaultPlanLines: [
        {
          planId: -1,
          title: "(๑ १д१)ﾉ",
          content: "规划或记录一下日常生活吧 (๑•̀ㅂ•́)و",
          time: "00:00"
        }
      ]
    }
  },
  computed: {
    photoUrl () {return this.$store.state.config.userInfo.photoUrl ? this.$store.state.config.userInfo.photoUrl : this.defaultPhotoUrl},
    isLogin  () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},
    username () {return this.$store.state.config.login.username},
    greeting () {
      let hour = new Date().getHours()
      if(hour < 6){return '凌晨了!'}
      else if (hour < 9) {return '早上好,'}
      else if (hour < 12){return '上午好,'}
      else if (hour < 14){return '中午好,'}
      else if (hour < 19){return '下午好,'}
      else if (hour < 24){return '晚上好,'}
      else               {return '您处在异世界,'}
    }
  },
  watch:{
    screenWidth (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if(!this.timer){
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function(){
          if(that.screenWidth >= 1300) {
            that.DynamicStyle.show = false
            that.DynamicStyle.main  = 'width:65%'
            that.DynamicStyle.right = 'width:35%'
            that.toolVisible = true
          } else if (that.screenWidth < 1300) {
            that.DynamicStyle.show = true
            that.DynamicStyle.main  = 'width:100%'
            that.DynamicStyle.right = 'width:0%;margin-left:0;margin-right:0;'
            that.toolVisible = false
          }
          that.timer = false
        },300)
      }
    },
    isLogin (val) {
      if(val) {
        this.statisticsPicture()
        this.statisticsArticle()
        this.findWeather()
        this.findPlans()
      }
    }
  },
  methods: {
    testBTN () {
      ipcRenderer.send('test-dialog')
    },
    findWeather () {
      this.$refs.weather.findWeather()
    },
    statisticsPicture () {
      this.$refs.statisPicture.findStatis()
    },
    statisticsArticle () {
      this.$refs.statisArticle.findStatis()
    },
    /*───────────────────────────────────────────────── 网页 ─────────────────────────────────────────────────*/
    toolVisibleHandler () {
      this.toolVisible = !this.toolVisible
      if (this.toolVisible) {
        this.DynamicStyle.show  = false
        this.DynamicStyle.main  = 'width:65%'
        this.DynamicStyle.right = 'width:35%'
        this.DynamicStyle.planLineToolWidth = 'width:35%'
      } else {
        this.DynamicStyle.show  = true
        this.DynamicStyle.main  = 'width:100%'
        this.DynamicStyle.right = 'width:0%;margin-left:0;margin-right:0;'
      }
    },
    findPlans () {
      let param = {type: 'LINE', date: getNowDate()}
      this.$refs.refPlanCard.findPlanCards()
      getPlans(param).then(resp => {
        if (resp.data[getNowDate()]) {
          this.planLines = resp.data[getNowDate()]
          console.log(resp.data[getNowDate()])
          console.log(this.planLines)
        } else {
          this.planLines = this.defaultPlanLines
        }
      })
    }
  },
  activated () {
    if (this.isLogin) {
      this.statisticsPicture()
      this.statisticsArticle()
      this.findWeather()
      this.findPlans()
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  components: {
    webCollect, statisticePicture, statisticeArticle, weather, planCard
  }
}
</script>

<style scoped lang="scss">
  @import url("https://fonts.googleapis.com/css?family=Lato:500,700,800");
  .index-root {
    @include flex(column,flex-start,center);
    height:100%;
    .block-two {
      height: 150px;
      .weather {
        margin-right: 30px !important;
      }
    }
  }

  .block-title {
    @include color();
    @include flex(row,flex-start,center);
    @include boxBase(99%,10%);
    font-size: 35px;

    .title {
      @include flex(column,flex-start,flex-start);
      margin-left: 30px;
      .username {
        font-weight: bold;
      }
      .chicken-soup {
        font-size: 11px;
        margin: 5px 0 0 15px;
        color: #989d9f;
      }
    }
  }

  .block-body {
    @include boxBase(99%,90%);
    @include flex(row,flex-start,flex-start);

    .body-main {
      @include flex(row,flex-start,flex-start);
      height: 98%;
      margin: 0 10px 0 10px;
      position: relative;
      transition: width 0.2s;

      .c-one {
        @include flex(column,space-between);
        height: 100%;
        max-width: 200px;
        min-width: 200px;
        padding-top: 10px;
        border-radius: 10px;
        transition: box-shadow 0.5s;

        // 头像
        .c-one-avatar {
          @include boxBase(200px,200px);
          border-radius: 10px;
          transition: box-shadow 0.5s;
          .c-one-avatar-img {
            max-width: 200px;
            max-height: 200px;
            border-radius: 10px;
            object-fit: cover;
          }
        }

        // 统计
        .c-one-statistics {
          @include flex(column,space-around,flex-start);
          @include themeColor(#ffffff,#c3c3c3);
          height: 100%;
          padding-bottom: 15px;
          .statis-divider {
            @include themeColor(#ffffff,#909090);
          }
        }
      }

      .c-two {
        @include flex(column,flex-start,flex-start);
        @include boxBase(100%,100%);
        padding: 10px 0 0 20px;

        .c-tow-calender {
          @include flex(column,flex-start,flex-start);
          @include boxBase(98%,100%);
          @include themeBorder(3px,$theme-color-light-5,$theme-color-night-1,'top left bottom right');
          text-align: left;
          margin: 20px 0 20px 0;
          border-radius: 10px;
          transition: box-shadow 0.5s;

          &-title {
            @include flex(row,center,center);
            @include boxBase(100%,40px);
            @include themeColor(#6a6964, #95948d);
            box-shadow: 0 15px 15px -16px rgba(0,0,0,.3);
            .title-body {
              @include flex(row,flex-start,center);
              @include boxBase(100%,100%);
              @include fontBase(18px,700,Lato);
              @include themeBorder(1px,$theme-color-light-3,$theme-color-night-dark-2,'bottom');
              margin-left: 10px;
              margin-right: 10px;
              &-emoji {
                @include themeColor($theme-color-light,$theme-color-night);
                font-size: 12px;
                margin-left: 10px;
                transition: opacity 0.3s;
                opacity: 0;
              }
              &:hover {
                .title-body-emoji {
                  opacity: 1;
                }
              }
            }
          }

          .c-tow-calender-content {
            @include flex(row,flex-start,flex-start);
            @include boxBase(100%,100%);

            .plan-line-tool {
              @include boxBase(100%,100%);
              overflow-y: scroll;
              &::-webkit-scrollbar {display: none;}
              .plan-line {
                @include boxBase(100%,42px);
                margin-top: 15px;
                &-time {
                  @include fontBase(17px,700,Lato);
                  @include themeColor(#a9a9a9, #a1a19f);
                  height: 25px;
                  margin: 10px 10px 0 10px;
                }
                &-title {
                  @include fontBase(14px,500);
                }
                &-content {
                  @include fontBase(12px);
                  @include themeColor(#a5a5a5, #6d6d6d);
                  @include themeBorder(2px,$theme-color-light-dark-1,$theme-color-night-dark-1,bottom);
                  height: 18px;
                  margin: 0 10px 10px 20px;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }

      .show-tool {
        width: 20px;
        top: 45%;
        right: -13px;
        position: absolute;
        cursor: pointer;
        .show-tool-icon {
          width: 20px;
          height: 20px;
          color: $theme-color-light;
        }
      }
    }

    .body-right {
      @include flex(column,flex-start,center);
      height: 98%;
      border-radius: 10px;
      overflow-y: scroll;
      overflow-x: hidden;
      transition: width 0.1s;
    }
  }

  .right-divider {
    /deep/ .el-divider {
      background-color: #cd5c5c !important;
    }
  }
  .global-hover {
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
    }
  }
  .global-hover-more {
    &:hover {
      box-shadow: 0 2px 14px 1px rgba(0,0,0,.5);
      [data-theme="night"] & {
        box-shadow: 0 2px 14px 3px rgba(0,0,0,0.7);
      }
    }
  }

</style>
